<template>
  <f7-panel
    left
    :swipe="showswipe"
    swipe-no-follow
    resizable
    :opened="panelopened"
    @panel:closed="switchpages()"
  >
    <f7-page class="qm-panel">
      <f7-block>
        <!-- 头部名称和设置 -->
        <div class="header">
          <div class="headertitle">
            <img :src="data.img" alt="" v-if="data.img" />
            <div v-else class="headerimg">
              <div class="surname">{{ surname }}</div>
            </div>
          </div>
          <div class="name">{{ user.userName }}</div>
          <div class="qm-icon">
            <f7-link  panel-close="left" @click="openedpanel('/ui/set/index')">
              <f7-icon f7="gear_alt"></f7-icon>
            </f7-link>
          </div>
        </div>
        <f7-card class="qm-card">
          <f7-link panel-close="left" @click="openedpanel('/ui/terminal/index1')">
            <qm-field label="系统切换" readonly is-link>
              <template #left-icon>
                <f7-icon
                  f7="arrow_right_arrow_left_circle_fill"
                  class="card-icon"
                ></f7-icon>
              </template>
            </qm-field>
          </f7-link>
          <div class="title">
            当前 <span style="color: #719ef5">{{data.serverName}}</span>
          </div>
          <div class="title">{{data.parentName}}</div>
        </f7-card>
        <!-- 通讯录跳转 -->
        <f7-list class="qm-list">
          <f7-list-item
            link="/ui/notice/index5"
            title="通讯录"
            panel-close="left"
          >
            <f7-icon slot="media" f7="person_2_fill"></f7-icon>
          </f7-list-item>
          <f7-list-item link="#" title="实名认证" panel-close="left" >
            <f7-icon slot="media" f7="person_badge_plus"></f7-icon>
          </f7-list-item>
          <f7-list-item link="#" title="人脸采集" panel-close="left">
            <f7-icon slot="media" f7="person_crop_square"></f7-icon>
          </f7-list-item>
          <f7-list-item link="#" title="APP分享" panel-close="left">
            <f7-icon slot="media" f7="arrowshape_turn_up_right"></f7-icon>
          </f7-list-item>
          <f7-list-item
            link="/setting/about"
            title="检查更新"
            :after="'V' + edition"
            panel-close="left"
          >
            <f7-icon slot="media" f7="arrow_2_circlepath"></f7-icon>
          </f7-list-item>
          <f7-list-item
            link="/ui/set/index"
            title="退出登录"
            panel-close="left"
          >
            <f7-icon slot="media" f7="power"></f7-icon>
          </f7-list-item>
        </f7-list>
        <!-- 清除缓存 -->
      </f7-block>
        <f7-button large raised class="qm-button" >
          <f7-icon f7="paintbrush" color="blue" ></f7-icon>
          清除缓存</f7-button
        >
    </f7-page>
  </f7-panel>
</template>

<script>
export default {
  props:{
    // 是否开启滑动显示侧边栏
    showswipe:{
      type:Boolean,
      default:true
    },
    opened:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      edition:this.$framework.config.info.version,
      miniurl:'',
      panelopened:this.opened,
      data:this.$framework.account.changepanelinformation() || this.$framework.account.getminiapphomepage(),
      user: { userName:"" },
    };
  },
  async created(){
    this.user = await this.$framework.account.getUser();
  },
  watch:{
    opened(){
      this.panelopened = this.opened
    }
  },
  computed: {
    surname() {
      return this.user.userName.charAt(this.user.userName.length - 1);
    },
  },
  methods: {
    switchpages(){
      if(window.plus){
      plus.webview.getLaunchWebview().evalJS("vue.$f7.views.current.router.navigate('" + this.miniurl + "')")
      } else{
        this.$f7.views.current.router.navigate(this.miniurl)
      }
      this.$emit('closed',false)
    },
    // 本地页面跳转需要侧边栏关闭后再跳转 ，否则后续侧边栏无法滑出
    openedpanel(url){
      this.panelopened = false,
      this.miniurl = url
    }
  },
};
</script>

<style lang="less" scoped>
.qm-panel {
  padding-top: calc(55px * var(--ratio));
  position: relative;
  .header {
    margin-top: 20px;
    display: flex;
    .headertitle {
      width: 50px;
      height: 50px;
      .headerimg {
        background-color: #f9cdad;
        border-radius: 50%;
        text-align: center;
        line-height: 48px;
        .surname {
          color: white;
          font-size: 20px;
          line-height: 50px;
        }
      }

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .name {
      flex: 2;
      line-height: 48px;
      font-size: 15px;
      font-weight: 800;
      color: black;
      margin-left: 10px;
    }
    .qm-icon {
      line-height: 50px;
      .f7-icons {
        color: #4b4b4b;
        font-size: 20px;
      }
    }
  }
  /deep/ .f7-icons {
    font-size: 20px;
    color: #5e6a82;
  }
  /deep/ .van-field__label {
    color: black;
    font-size: 15px;
    font-weight: 500;
    margin-left: 5px;
  }
  /deep/ .block {
    --f7-block-margin-vertical: 0px;
  }
  /deep/.van-cell {
    background-color: inherit;
    padding: 5px 0px;
  }
  .qm-card {
    --f7-card-bg-color: #f4f8ff;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px 10px;
    .card-icon {
      color: #3d80fc;
    }
    .title {
      color: #a1acbe;
      overflow: hidden; // 溢出部分隐藏
      white-space: nowrap; // 文字不换行
      text-overflow: ellipsis; // 显示省略号
    }
  }
  .qm-list {
    --f7-list-item-media-margin: 0px;
    --f7-list-item-title-font-weight: 500;
    --f7-list-item-padding-horizontal: 0px;
  }
  .qm-button {
    position: absolute;
    --f7-button-raised-box-shadow: inset 0px 0px 0px 1px #97abfb;
    color: #97abfb;
    // position: absolute;
    bottom: 3%;
    left: 26%;
    height: 40px;
    width: 131px;
    min-height: calc(74px * var(--ratio));
    line-height: calc(82px * var(--ratio));
  }
}
</style>
